<template>
  <div class="type-proportion">
    <p class="title">
      停车场类型占比
      <!-- <img style="height: 0.7em;margin-left: 0.3em;" src="../../../../assets/bigDataSourceImage/barTitleIcon.png"> -->
      <img class="title-icon iconOne" src="../../../../assets/bigDataSourceImage/titleIcon1.png"><img class="title-icon iconTwo" src="../../../../assets/bigDataSourceImage/titleIcon2.png"><img class="title-icon iconThree" src="../../../../assets/bigDataSourceImage/titleIcon3.png">
    </p>
    <div id="a" style="height: calc(100% - 1.4em); width: 100%;">
      	<canvas :id="canvasId"></canvas>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        canvasId: Math.random()
      }
    },
    mounted() {
      this.init();

      let _this = this;
       window.addEventListener('resize', function () {
             _this.init();
        })
    },
    methods: {
      init(){
        let list = [
        	{num: 60, name: '写字楼', color: '#1f74f1'},
        	{num: 100, name: '居民区', color: '#00d1ce'},
        	{num: 50, name: '商业广场', color: '#37c5f3'},
        ]
        let selectedIndex = 0;

        let height = document.getElementById("a").offsetHeight;
        let width = document.getElementById("a").offsetWidth;

        let canvas = document.getElementById(this.canvasId);
        canvas.width = width;
        canvas.height = height;
        let context = canvas.getContext('2d');

        //	左侧宽度
        let leftWidth = canvas.width * 0.6;
        //	右侧宽度
        let rigntWidth = canvas.width * 0.4;
        //	右侧+Pading
        let rigntPading = leftWidth + rigntWidth/10;
        //	圆心y轴位置
        let circleCenter = canvas.height * 0.54;
        //  外圆半径
        let outCircRadius = ( canvas.width/2 * 0.55 + canvas.height/2 * 0.55 )/2;
        //  内圆半径
        let inCircRadius = outCircRadius * 0.65;

        let count = 0;
        list.forEach((data, index)=> {
        	count += data.num;
        })

        list.forEach((data, index)=> {
        	data.scale = data.num / count;
        	data.angle = data.scale*2*Math.PI;

          let dercRadius = 3.5;
        	let dercHeight = canvas.height/10 + index * 5*dercRadius;

        	context.beginPath();
        	context.moveTo( rigntPading, dercHeight );
        	context.arc( rigntPading, dercHeight, dercRadius, 0, 2 * Math.PI, false );
        	context.lineTo( rigntPading, dercHeight );
        	context.closePath();
        	context.fillStyle = data.color;
        	context.fill();

        	//	文字
        	context.font="12px Arial";
        	context.fillStyle = "#1F74F1";
        	// context.textAlign = "center";	// 设置水平对齐方式
        	context.textBaseline = "middle";	// 设置垂直对齐方式
        	let scale = (data.scale*100).toFixed(0) + '%';
        	context.fillText(data.name, rigntPading + 2*dercRadius, dercHeight);
        	context.fillText(scale, rigntPading + 2*dercRadius + rigntWidth*0.58, dercHeight);
        })

        function draw(mouseX, mouseY) {
        	let anglePointer = 0;

        	list.forEach((data, index)=> {
        		context.beginPath();
        		context.moveTo( leftWidth/2, circleCenter );
        		//	x圆的中心的 x 坐标。y圆的中心的 y 坐标。r	圆的半径。sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle	结束角，以弧度计。counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
        		context.arc( leftWidth/2, circleCenter, outCircRadius, anglePointer, anglePointer+data.angle, false );
        		if(context.isPointInPath(mouseX, mouseY)){
        			context.closePath();
        			context.beginPath();
        			context.moveTo( leftWidth/2, circleCenter );
        			selectedIndex = index;
        			context.arc( leftWidth/2, circleCenter, outCircRadius+outCircRadius/16, anglePointer, anglePointer+data.angle, false );
        		}
        		context.lineTo( leftWidth/2, circleCenter );
        		context.closePath();
        		context.fillStyle = data.color;
        		context.fill();

        		data.angleCenter = anglePointer + data.angle/2;
        		anglePointer += data.angle;
        	})

        	let pointerCanvas = document.createElement('canvas');
        	pointerCanvas.width = 130;
        	pointerCanvas.height = 130;
        	let pointerContext = pointerCanvas.getContext('2d');
        	pointerContext.clearRect ( 0, 0, pointerCanvas.width, pointerCanvas.height );
        	pointerContext.beginPath();
        	pointerContext.moveTo( pointerCanvas.width/2, pointerCanvas.height/2 );
        	//	x圆的中心的 x 坐标。y圆的中心的 y 坐标。r	圆的半径。sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle	结束角，以弧度计。counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
        	pointerContext.arc( pointerCanvas.width/2, pointerCanvas.height/2, inCircRadius, 0, 2 * Math.PI, false );
        	pointerContext.lineTo( pointerCanvas.width/2, pointerCanvas.height/2 );
        	pointerContext.closePath();
        	pointerContext.fillStyle = '#353F60';
        	pointerContext.fill();

        	//
        	if(selectedIndex != null){
        		//填充三角形
        		pointerContext.beginPath();
        		pointerContext.moveTo(pointerCanvas.width/2+inCircRadius*1.3, pointerCanvas.height/2);
        		pointerContext.lineTo(pointerCanvas.width/2, pointerCanvas.height/2 + 30);
        		pointerContext.lineTo(pointerCanvas.width/2, pointerCanvas.height/2 - 30);
        		pointerContext.fillStyle = '#353F60';
        		pointerContext.closePath();
        		pointerContext.fill();

        		//	旋转
        		context.translate(leftWidth/2, circleCenter);//将绘图原点移到画布中点
        		context.rotate(list[selectedIndex].angleCenter);
        		context.translate(-leftWidth/2, -circleCenter);//将画布原点移动
        	}
        	context.drawImage(pointerCanvas, leftWidth/2 - pointerCanvas.width/2, circleCenter - pointerCanvas.height/2);
        	if(selectedIndex != null){
        		context.translate(leftWidth/2, circleCenter);//将绘图原点移到画布中点
        		context.rotate(-list[selectedIndex].angleCenter);
        		context.translate(-leftWidth/2, -circleCenter);//将画布原点移动

        		context.font = inCircRadius*0.5 + "px Arial";
        		context.fillStyle = "#dae4ff";
        		context.textAlign = "center";	// 设置水平对齐方式
        		context.textBaseline = "middle";	// 设置垂直对齐方式
        		let scale = (list[selectedIndex].scale*100).toFixed(0) + '%';
        		context.fillText(scale, leftWidth/2, circleCenter - inCircRadius*0.2 - 1);

            context.font = inCircRadius*0.35 + "px Arial";
            context.fillText(list[selectedIndex].name, leftWidth/2, circleCenter + inCircRadius*0.2 + 1);
        	}
        }

        draw(0, 0);

        canvas.onmousemove = function(clickEvent){
        	var mouseX = clickEvent.pageX - this.offsetLeft;
        	var mouseY = clickEvent.pageY - this.offsetTop;
        	context.clearRect(0, 0, leftWidth-5, canvas.height);

        	draw(mouseX, mouseY);
        }
      }
    }
  }
</script>

<style scoped>
  .type-proportion {
    height: 100%;
    padding: 1.4em;
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 0.8em;
  }
  .title-icon {
    height: 0.7em;
    margin-right: -3px;
  }
  .iconOne,
  .iconTwo,
  .iconThree {
    animation: enlarge 0.9s infinite;
  }
  .iconTwo {
    animation-delay: 0.3s;
  }
  .iconThree {
    animation-delay: 0.6s;
  }
  
  @keyframes enlarge {
    0% {transform: scale(1);}
    33.33% {transform: scale(1.3);}
    66.66% {transform: scale(1);}
    100% {transform: scale(1);}
  }
  


</style>
